<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--panel面板可以设置整体的高度-->
<div class="easyui-panel" style="height: 95%">
    <table id="blog-datagrid" style="height:450px">
    </table>
    <div id="blog-datagrid-toolbar">
        <div>
            ID：<input type="text" class="easyui-numberbox" id="search-blog-id"/>
            标题：<input type="text" id="search-blog-title"/>
            分类：<input class="easyui-combobox" id="search-blog-category"
                      data-options="valueField:'id',textField:'name',url:'<%=request.getContextPath()%>/blog.html?act=category'">
            发布时间：<input class="easyui-datebox" id="search-blog-startDate"/>-
            <input class="easyui-datebox" id="search-blog-endDate"/>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search"
               onclick="doBlogSearch()">搜索</a>
        </div>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="doEditBlog(0)">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="doEditBlog(1)">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="doDeleteBlog()">删除</a>
    </div>
</div>

<div class="easyui-dialog" closed="true" id="edit-blog-dialog"
     modal="true" title="编辑博客" style="width:800px;height:600px;padding:30px" buttons="#dlg-blog-buttons">
</div>
<div id="dlg-blog-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitBlog()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#edit-blog-form').form('reset');">重填</a>
</div>
<link href="<%=request.getContextPath()%>/media/kindeditor-4.1.10/themes/default/default.css" type="text/css"
      rel="stylesheet">
<script type="text/javascript" charset="utf-8"
        src="<%=request.getContextPath()%>/media/kindeditor-4.1.10/kindeditor-all.js"></script>
<script type="text/javascript" charset="utf-8"
        src="<%=request.getContextPath()%>/media/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript">
    $(function () {
        $("#blog-datagrid").datagrid({
            url: "<%=request.getContextPath()%>/blog.html?act=list",
            pagination: true,
            pageList: [5, 10, 15, 20],
            toolbar: "#blog-datagrid-toolbar",
            frozen: true,//冻结标题行
            singleSelect: true,
            fit: true,//让表格自动适应面板的高度
            nowrap: false,//高度自适应，当内容比较多的时候会自动换行
            columns: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'title', title: '标题', width: 80},
                {field: 'createdDate', title: '创建时间', width: 160},
                {
                    field: 'cover', title: '首页图', width: 300, formatter: function (val, row) {
                    return '<img src="' + row.cover + '" style="max-height: 200px"/>'
                }
                },
                {field: 'nickname', title: '作者', width: 80},
                {
                    field: 'category.name', title: '分类', width: 80, formatter: function (val, row) {
                    if (row.category == null) return "<span style='color:red'>未分类</span>";
                    return row.category.name
                }
                },
                {field: 'summary', title: '摘要', width: 200},
                {field: 'publishDate', title: '发布时间', width: 160},
                {
                    field: 'status', title: '状态', width: 80, formatter: function (val, row) {
                        switch(row.status){
                            case -1:
                                return "<span style='color:#9d7e87'>已删除</span>";
                            case 0:
                                return "<span style='color:#00cf4d'>存草稿</span>";
                            case 1:
                                return "<span style='color:#ff0200'>已发布</span>";
                        }
                }
                }
            ]]
        })
    })

    function doBlogSearch() {
        var queryParams = $('#blog-datagrid').datagrid('options').queryParams;
        queryParams.id = $("#search-blog-id").val();
        queryParams.title = $("#search-blog-title").val();
        queryParams.startDate = $("#search-blog-startDate").datebox("getValue");
        queryParams.endDate = $("#search-blog-endDate").datebox("getValue");
        queryParams["category.id"] = $("#search-blog-category").combobox("getValue");
        //重新加载datagrid
        $("#blog-datagrid").datagrid('reload');
    }

    var kingEditorParams = {
        filePostName: "file",//指定上传文件参数名称
        uploadJson: '<%=request.getContextPath()%>/blog.html?act=upload',//指定上传文件请求的url。
        dir: "image"//上传类型，分别为image、flash、media、file,
    }
    var editor;

    function doEditBlog(type) {
        var id = "";
        var row = $('#blog-datagrid').datagrid('getSelected');
        if (type == 1) {//要修改
            if (row == null) {
                alert("请选择要编辑的数据");
                return;
            }
            id = row.id;
        }
        $("#edit-blog-dialog").dialog({
            href: "/blog.html?act=get&id=" + id,
            onLoad: function () {
                editor = KindEditor.create($("#editor"), kingEditorParams);
            },
            onBeforeDestroy: function () {
                KindEditor.remove("#editor");
            }
        }).dialog('open');
    }

    function submitBlog() {
        $('#edit-blog-form').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    editor.sync();//同步富文本编辑器，否则拿不到
                    $.ajax({
                        url: "<%=request.getContextPath()%>/blog.html?act=edit",
                        data: $("#edit-blog-form").serialize(),
                        method: "post",
                        success: function (data) {
                            if (data.status) {
                                $("#blog-datagrid").datagrid('reload');
                                $("#edit-blog-dialog").dialog("close");
                            } else {
                                alert(data.message)
                            }
                        }
                    })
                }
                return false;
            }
        });
    }
</script>
